<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<body>
	<div id="app">
		<div class="header">
			<a class="topad" href="javascript:void(0);">
				<img src="img/min.png" >
			</a>
			<div class="searchbar">
				<img src="img/logo.png" >
				<div id="ss">
					<span></span>
					搜索商品名称
				</div>
				<img id="wo" src="img/yh.png" >
			</div>
			<div class="headermenu">
				<a id="m1">推荐</a>
				<a id="m2">智能</a>
				<a id="m3">电视</a>
				<a id="m4">家电</a>
				<a id="m5">笔记本</a>
				<div id="s"></div>
				<div class="xsyc">
					<a>全部</a>
					<div style="width: 85%;">
						
					</div>
					<div class="nk">
						推荐
					</div>
					<div class="nk">
						智能
					</div>
					<div class="nk">
						电视
					</div>
					<div class="nk">
						家电
					</div>
					<div class="nk">
						笔记本
					</div>
					<div style="width: 70%;">
						
					</div>
				</div>
			</div>
		</div>
		<div id="n1" >
			<div id="neiron" class="shell">
				<div class="images">
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
					<div class="img"></div>
				</div>
			</div>
			<div class="antu">
				<img id="xm1" src="img/l10.webp" >
				<img id="xm2" src="img/l9.webp" >
				<img id="xm3" src="img/l8.webp" >
				<img id="xm4" src="img/l7.webp" >
				<img id="xm5" src="img/l6.webp" >
				<img id="xm6" src="img/l5.webp" >
				<img id="xm7" src="img/l4.png" >
				<img id="xm8" src="./img/l3.png" >
				<img id="xm9" src="img/l2.webp" >
				<img id="xm10" src="img/l1.png" >
			</div>
			<div class="zy">
				<div id="xq"><img src="img/t1.webp" ></div>
				<div>
					<div>
						<img id="zn" src="img/t2.webp" >
					</div>
					<div>
						<img id="ds" src="img/t3.webp" >
					</div>
				</div>
			</div>
			<div class="zb">
				<img src="./img/t4.webp" >
			</div>
			<div  class="sj">
				<div :id="item.id" @click="hqid($event)" v-for="(item,index) in list" class="sj_dk">
					<div class="sj_img">
						<img :src="'http://r3djjl44q.hd-bkt.clouddn.com/'+item.pimg" >
					</div>
					<div class="sj_wz">
						<a class="pt">{{ item.pname }}</a><br>
						<a class="zbwz">{{ item.details }}</a><br>
						<a class="je">￥{{ item.prices }}起</a><s>{{ item.discount }}</s>
						<div class="sj_bt">立即购买</div>
					</div> 
				</div>
			</div>

			<div class="ti">
				更多小米手机产品>
			</div>
			<div class="xmim">
				
			</div>
			<div class="ti2">
				更多小米电视产品>
			</div>
			<div class="xmim2">
				
			</div>
			<div class="sj" >
				<div class="sj_dk" v-for="(item,index) in listdn" >
					<div class="sj_img">
						<img src="img/xm1.jpg">
					</div>
					<div class="sj_wz">
						<a class="pt">{{ item.pname }}</a><br>
						<a class="zbwz">{{ item.details }}</a><br>
						<a class="je">{{ item.prices }}</a>
						<div class="sj_bt">立即购买</div>
					</div> 
				</div>
			</div>
			<div class="ti2">
				更多小米笔记本产品>
			</div>
			<div class="xmim3">
				
			</div>
			<div class="ti2">
				更多小米家电产品>
			</div>
			<div class="xmim4">
				
			</div>
			<div class="ti3">
				更多米家智能产品>
			</div>
			<div class="sj2">
					<div>
						<img src="img2/y1.webp" >
					</div>
					<div>
						<img src="img2/y2.webp" >
					</div>
			</div>
			<div class="sj2">
					<div>
						<img src="img2/y3.webp" >
					</div>
					<div>
						<img src="img2/y4.webp" >
					</div>
			</div>
			<div class="sj2">
					<div>
						<img src="img2/y5.webp" >
					</div>
					<div>
						<img src="img2/y6.webp" >
					</div>
			</div>
			<div class="bottom_img">
				
			</div>
			<div class="ti4">
				了解小米
			</div>
		</div>
		<div id="n2"  >
			<div id="neiron2" class="shell2">
				<div class="images2">
					<div class="img2"></div>
					<div class="img2"></div>
					<div class="img2"></div>
					<div class="img2"></div>
					<div class="img2"></div>
				</div>
			</div>
			<div class="antu2">
				<img src="img2/o1.webp" >
				<img src="img2/o2.webp" >
				<img src="img2/o3.webp" >
				<img src="img2/o4.webp" >
				<img src="img2/o5.webp" >
				<img src="img2/o6.webp" >
				<img src="img2/o7.webp" >
				<img src="img2/o8.webp" >
				<img src="img2/o9.webp" >
				<img src="img2/o10.webp" >
			</div>
			<div class="ii">
				
			</div>
			<div class="ii2">
				
			</div>
			<div class="bj">
				<div class="sgyp"  >
					<div class="sj_dk2" v-for="(item,index) in listzn" :id="item.id">
						<div class="sj_img2">
							<img src="img/p2.jpg"/>
						</div>
						<div class="sj_wz2">
							<a class="pt2">{{ item.pname }}</a><br>
							<a class="zbwz2">{{ item.details }}</a><br>
							<a class="je2">{{ item.discount }}</a>
						</div>
					</div>
				</div>
			</div>
			<div class="xjd">
				小家电
			</div>
			<div class="sgyp">
				<div class="sj_dk2" v-for="(item,index) in listjd" :id="item.id">
					<div class="sj_img2">
						<img src="img2/tp28.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				智能穿戴
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp38.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp39.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp40.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				耳机音箱
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp42.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp43.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp44.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				品质灯具
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp46.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp47.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp48.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp49.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp50.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp51.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				生活居家
			</div>
			<div class="xjd">
				便携出行
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp54.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp55.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp56.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp57.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp58.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp59.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				个户清洁
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp61.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp62.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp63.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp64.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp65.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp66.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				儿童专区
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp68.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp69.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp70.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="xjd">
				配件耗材
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp72.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp73.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp74.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="sgyp">
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp75.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp76.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
				<div class="sj_dk2">
					<div class="sj_img2">
						<img src="img2/tp77.webp"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">黑鲨4</a><br>
						<a class="zbwz2">磁动力升降肩键</a><br>
						<a class="je2">￥2499</a>
					</div> 
				</div>
			</div>
			<div class="db">
				
			</div>
		</div>
		<div id="n3" >
			<div class="top">
				
			</div>
			<div class="sj3" >
				<div class="sj_dk3" v-for="(item,index) in listds" :id="item.id">
					<div class="sj_img3">
						<img src="img3/a1.jpg" >
					</div>
					<div class="sj_wz3">
						<a class="pt3">{{ item.pname }}</a><br>
						<a class="zbwz3">{{ item.details }}</a><br>
						<a class="je3">{{ item.discount }}</a>
						<div class="sj_bt3">立即购买</div>
					</div> 
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp20.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div> 
				</div>
			</div>
			<div class="top2">
				
			</div>
			<div class="sj3">
				<div class="sj_dk3" v-for="(item,index) in listds" :id="item.id">
					<div class="sj_img3">
						<img src="img3/tp11.jpg" >
					</div>
					<div class="sj_wz3">
						<a class="pt3">{{ item.pname }}</a><br>
						<a class="zbwz3">{{ item.details }}</a><br>
						<a class="je3">{{ item.discount }}</a>
						<div class="sj_bt3">立即购买</div>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp13.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp16.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="top3">
				
			</div>
			<div class="sj3">
				<div class="sj_dk3" v-for="(item,index) in listds" :id="item.id">
					<div class="sj_img3">
						<img src="img3/tp11.jpg" >
					</div>
					<div class="sj_wz3">
						<a class="pt3">{{ item.pname }}</a><br>
						<a class="zbwz3">{{ item.details }}</a><br>
						<a class="je3">{{ item.discount }}</a>
						<div class="sj_bt3">立即购买</div>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp13.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp16.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="top4">
				
			</div>
			<div class="sj3">
				<div class="sj_dk3" v-for="(item,index) in listds" :id="item.id">
					<div class="sj_img3">
						<img src="img3/tp11.jpg" >
					</div>
					<div class="sj_wz3">
						<a class="pt3">{{ item.pname }}</a><br>
						<a class="zbwz3">{{ item.details }}</a><br>
						<a class="je3">{{ item.discount }}</a>
						<div class="sj_bt3">立即购买</div>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp13.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp16.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="top5">
				
			</div>
			<div class="sj3">
				<div class="sj_dk3" v-for="(item,index) in listds" :id="item.id">
					<div class="sj_img3">
						<img src="img3/tp11.jpg" >
					</div>
					<div class="sj_wz3">
						<a class="pt3">{{ item.pname }}</a><br>
						<a class="zbwz3">{{ item.details }}</a><br>
						<a class="je3">{{ item.discount }}</a>
						<div class="sj_bt3">立即购买</div>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp13.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp16.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="sgyp2">
				<div class="sj_dk2" v-for="(item,index) in listds2" :id="item.id">
					<div class="sj_img2">
						<img src="img3/tp16.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div>
				</div>
			</div>
			<div class="top6">
				
			</div>
		</div>
		<div id="n4">
			<div class="top_1">
				
			</div>
			<div class="top_2">
				<img src="img4/top2.webp" >
			</div>
			<div class="sgyp3">
				<div class="sj_dk2" v-for="(item,index) in listjd2" :id="item.id">
					<div class="sj_img2">
						<img src="img/p1.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div> 
				</div>
			</div>
			<div class="top_2">
				<img src="img4/top3.webp" >
			</div>
			<div class="sgyp3">
				<div class="sj_dk2" v-for="(item,index) in listjd3" :id="item.id">
					<div class="sj_img2">
						<img src="img/p1.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div> 
				</div>
			</div>

			<div class="top_2">
				<img src="img4/top4.webp" >
			</div>
			<div class="top_2">
				<img src="img4/top5.webp" >
			</div>
			<div class="top_2">
				<img src="img4/top6.webp" >
			</div>
			<div class="sgyp3">
				<div class="sj_dk2" v-for="(item,index) in listjd4" :id="item.id">
					<div class="sj_img2">
						<img src="img/p1.jpg"/>
					</div>
					<div class="sj_wz2">
						<a class="pt2">{{ item.pname }}</a><br>
						<a class="zbwz2">{{ item.details }}</a><br>
						<a class="je2">{{ item.discount }}</a>
					</div> 
				</div>
			</div>
			<div class="dbkg">
				
			</div>
		</div>
		<div id="n5">
			<div class="tgg">
				
			</div>
			<div class="top_x">
				<img src="img5/u1.webp" >
			</div>
			<div class="tgg_x">
				
			</div>
			<div class="sj4">
				<div class="sj_dk4">
					<div class="sj_img4">
						<img src="img5/c1.jpg" >
					</div>
					<div class="sj_wz4">
						<div class="sj_wz4_i">
							<a class="pt4">Xiaomi 11 Pro</a>
							<a class="je4">￥4499</a>
						</div>
						<div class="sj_wz4_i2">
							<a class="zbwz4">1.12''GN2｜骁龙888</a>
							<div class="sj_bt4">立即购买</div>
						</div>
					</div>
				</div>
			</div>
			<div class="sj4">
				<div class="sj_dk4">
					<div class="sj_img4">
						<img src="img5/c2.jpg" >
					</div>
					<div class="sj_wz4">
						<div class="sj_wz4_i">
							<a class="pt4">Xiaomi 11 Pro</a>
							<a class="je4">￥4499</a>
						</div>
						<div class="sj_wz4_i2">
							<a class="zbwz4">1.12''GN2｜骁龙888</a>
							<div class="sj_bt4">立即购买</div>
						</div>
					</div>
				</div>
			</div>
			<div class="top_x">
				<img src="img5/u2.webp" >
			</div>
			<div class="tgg_x">
				
			</div>
			<div class="sj5">
				<div class="sj_dk5">
					<div class="sj_img5">
						<img src="img3/a1.jpg" >
					</div>
					<div class="sj_wz5">
						<a class="pt5">Xiaomi 11 Pro</a><br>
						<a class="zbwz5">1.12''GN2｜骁龙888</a><br>
						<a class="je5">￥4499</a>
						<div class="sj_bt5">立即购买</div>
					</div> 
				</div>
				<div class="sj_dk5">
					<div class="sj_img5">
						<img src="img3/a2.jpg" >
					</div>
					<div class="sj_wz5">
						<a class="pt5">Xiaomi 11 Pro</a><br>
						<a class="zbwz5">1.12''GN2｜骁龙888</a><br>
						<a class="je5">￥4499</a>
						<div class="sj_bt5">立即购买</div>
					</div> 
				</div>
			</div>
			<div class="top_x">
				<img src="img5/u3.webp" >
			</div>
			<div class="tgg_x">
				
			</div>
			<div class="top_x">
				<img src="img5/u4.webp" >
			</div>
			<div class="tgg_x">
				
			</div>
			<div class="top_x">
				<img src="img5/u5.webp" >
			</div>
			<div class="dbx">
				<img src="img5/xc1.webp" >
				<img src="img5/xc2.webp" >
				<img src="img5/xc3.webp" >
				<img src="img5/xc4.webp" >
				<img src="img5/xc5.webp" >
				<img src="img5/xc6.webp" >
			</div>
			<div class="zgz">
				
			</div>
		</div>
	<div class="bottom">
			<div id="sy">
				<img src="img/bs.png" ><br>
				<a style="color: #FF6700;">首页</a>
			</div>
			<div id="fl">
				<img src="img/bottom2.png" ><br>
				<a>分类</a>
			</div>
			<div id="mq">
				<img src="img/bottom3.png" ><br>
				<a>米圈</a>
			</div>
			<div id="gwc">
				<img src="img/bottom4.png" ><br>
				<a href="gwc.html">购物车</a>
			</div>
			<div id="wd">
				<img src="img/bottom5.png" ><br>
				<a href="my.html">我的</a>
			</div>
		</div>
		<div class="appk">
			<div class="app">
				
			</div>
		</div>
	</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					nr:"",
					list:[],
					listzn:[],
					listdn:[],
					listjd:[],
					listds:[],
					listds2:[],
					listjd2:[],
					listjd3:[],
					listjd4:[]
				},
				methods:{
					queryGet(){
						this.list="";
						axios
								.get(`queryGoods`)
								.then(res => {
									var username=document.cookie.split(";")[0].split("=")[1];
									this.list=res.data.data;
								})
					},
					smartGet(){
						this.listzn="";
						axios
								.get(`smartGoods`)
								.then(res => {
									console.log(res);
									this.listzn=res.data.data;
									console.log(this.listzn);
								})

					},
					notebookGet(){
						this.listdn="";
						axios
								.get(`notebookDao`)
								.then(res => {
									console.log(res);
									this.listdn=res.data.data;
									console.log(this.listdn);
								})
					},
					appliancesGet(){
						this.listjd="";
						axios
								.get(`appliancesDao`)
								.then(res => {
									console.log(res);
									this.listjd=res.data.data;
									console.log(this.listjd);
								})
					},
					appliancesGet2(){
						this.listjd2="";
						axios
								.get(`appliancesDao2`)
								.then(res => {
									console.log(res);
									this.listjd2=res.data.data;
									console.log(this.listjd2);
								})
					},
					appliancesGet3(){

						this.listjd3="";
						axios
								.get(`appliancesDao3`)
								.then(res => {
									console.log(res);
									this.listjd3=res.data.data;
									console.log(this.listjd3);
								})
					},
					appliancesGet4(){

						this.listjd4="";
						axios
								.get(`appliancesDao4`)
								.then(res => {
									console.log(res);
									this.listjd4=res.data.data;
									console.log(this.listjd4);
								})
					},
					televisionGet(){
						this.listds="";
						axios
								.get(`televisionDao`)
								.then(res => {
									console.log(res);
									this.listds=res.data.data;
									console.log(this.listds);
								})
					},
					televisionGet2(){
						this.listds2="";
						axios
								.get(`televisionDao2`)
								.then(res => {
									console.log(res);
									this.listds2=res.data.data;
									console.log(this.listds2);
								})
					},
					hqid(n){
						alert(n.currentTarget.id);
					}
				}
			});
			app.smartGet();
			app.queryGet();
			app.notebookGet();
			app.appliancesGet();
			app.televisionGet();
			app.televisionGet2();
			app.appliancesGet2();
			app.appliancesGet3();
			app.appliancesGet4();
			var arrow=document.querySelector(".headermenu div");
			var xsyc=document.querySelector(".xsyc");
			var ss=document.querySelector("#ss");
			var wo=document.querySelector("#wo");
			var gwc=document.querySelector("#gwc");
			var wd=document.querySelector("#wd");
			var fl=document.querySelector("#fl");
			var mq=document.querySelector("#mq");
			var xq=document.querySelector("#xq");
			var xm1=document.querySelector("#xm1");
			var xm2=document.querySelector("#xm2");
			var xm3=document.querySelector("#xm3");
			var xm4=document.querySelector("#xm4");
			var xm5=document.querySelector("#xm5");
			var xm6=document.querySelector("#xm6");
			var xm7=document.querySelector("#xm7");
			var xm8=document.querySelector("#xm8");
			var xm9=document.querySelector("#xm9");
			var xm10=document.querySelector("#xm10");
			var zn=document.querySelector("#zn");
			var ds=document.querySelector("#ds");
			var xqy=document.querySelector(".sj_dk");
			// xqy.onclick=function(){
			// 	window.location.href="xqy.html";
			// }
			ds.onclick=function(){
				window.location.href="ds.html";
			}
			zn.onclick=function(){
				window.location.href="zny.html";
			}
			xm1.onclick=function(){
				window.location.href="mjsc.html";
			}
			xm2.onclick=function(){
				window.location.href="xmzc.html";
			}
			xm3.onclick=function(){
				window.location.href="sjym.html";
			}
			xm4.onclick=function(){
				window.location.href="yjhx.html";
			}
			xm5.onclick=function(){
				window.location.href="xmsx.html";
			}
			xm6.onclick=function(){
				window.location.href="zny.html";
			}
			xm7.onclick=function(){
				window.location.href="bjb.html";
			}
			xm8.onclick=function(){
				window.location.href="ds.html";
			}
			xm9.onclick=function(){
				window.location.href="xyj.html";
			}
			xm10.onclick=function(){
				window.location.href="mfk.html";
			}
			xq.onclick=function(){
				window.location.href="xqy.html";
			}
			mq.onclick=function(){
				window.location.href="miquan.html";
			}
			fl.onclick=function(){
				window.location.href="fenlei.html";
			}
			wd.onclick=function(){
				window.location.href="my.html";
			}
			gwc.onclick=function(){
				window.location.href="gwc.html";
			}
			
			
			var arrowFlag=true;
			arrow.onclick=function(){
				if(arrowFlag){
					arrow.className=" rotate225";
					arrowFlag=false
					xsyc.style.height="3.2rem";
				}else{
					arrow.className=" rotate45";
					arrowFlag=true
					xsyc.style.height="0rem";
				}
			}
			
			ss.onclick=function(){
				window.location.href="ssy.html";
			}
			wo.onclick=function(){
				window.location.href="my.html";
			}
		
			let images = document.querySelector(".images")
			let wz = 0;
			let dsq;
			function yd() {
			    images.style.left = (wz * -100) + "%";
			}
			function xyz() {
			    if (wz >= 4-1) {
			        wz = 0
			    } else {
			        wz++
			    }
			}
			function syz() {
			    if (wz < 1) {
			        wz = 4-1
			    } else {
			        wz--
			    }
			}
			function dsff(){
			    dsq = setInterval(() => {
			        wz++
			        syz()
			        xyz()
			        yd()
			    }, 4000)
			}
			dsff();
				var tj=document.querySelector("#m1");
				var zn2=document.querySelector("#m2");
				var ds=document.querySelector("#m3");
				var jd=document.querySelector("#m4");
				var bjb=document.querySelector("#m5");
				
				var n1=document.querySelector("#n1");
				var n2=document.querySelector("#n2");
				var n3=document.querySelector("#n3");
				var n4=document.querySelector("#n4");
				var n5=document.querySelector("#n5");
				tj.onclick=function(){
					n1.style.display="block";
					n2.style.display="none";
					n3.style.display="none";
					n4.style.display="none";
					n5.style.display="none";
				}
				zn2.onclick=function(){
					n2.style.display="block";
					n1.style.display="none";
					n3.style.display="none";
					n4.style.display="none";
					n5.style.display="none";
				}
				ds.onclick=function(){
					n3.style.display="block";
					n1.style.display="none";
					n2.style.display="none";
					n4.style.display="none";
					n5.style.display="none";
				}
				jd.onclick=function(){
					n4.style.display="block";
					n1.style.display="none";
					n2.style.display="none";
					n3.style.display="none";
					n5.style.display="none";
				}
				bjb.onclick=function(){
					n5.style.display="block";
					n1.style.display="none";
					n2.style.display="none";
					n3.style.display="none";
					n4.style.display="none";
				}
		</script>
	</body>
</html>
